<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<table class="layui-hide" id="user-list-id" lay-filter="user-list-filter"></table>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(function(){

				let table = layui.table;
				let layer = layui.layer;
				let form = layui.form;
				let $ = layui.$;

				table.on('tool(user-list-filter)', function(obj){
					let event = obj.event;
					if(event==='edit'){
						layer.open({
							type: 2,
							title: '编辑用户',
							area: ['400px', '320px'],
							content: './user-edit.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('user-list-id');
							},
							success: function(layero, index, that){
								let iframeWindow = window[layero.find('iframe')[0].name];
								iframeWindow.postMessage(obj.data); 
							}
						});
					}
				});

				form.on('switch(switchStatus)', function(obj){
					let elem = obj.elem;
					let user = {};
					user.userId = elem.value;
					user.status = elem.checked?1:0;
					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8080/updateUser',
						data: JSON.stringify(user),
						contentType: 'application/json',
						dataType: 'json',
						success: function(res){
							if(res.code==0){
								layer.msg('用户状态更新成功');
							}else{
								layer.msg(res.msg);
							}
						}
					});
				});

				table.on('toolbar(user-list-filter)', function(obj){
					let event = obj.event;
					if(event==='add'){
						layer.open({
							type: 2,
							title: '添加用户',
							area: ['400px', '430px'],
							content: './user-add.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('user-list-id');
							}
						});
					}
				});

				table.render({
					elem: '#user-list-id',
					url: 'http://127.0.0.1:8080/getUserList',
					page: {
						prev: '上一页',
						next: '下一页'
					},
					request: {
						pageName: 'pageNo',
						limitName: 'pageSize'
					},
					parseData: function(res){
						return {
							'code': res.code,
							'msg': res.msg,
							'count': res.data.total,
							'data': res.data.page
						};
					},
					toolbar: `
						<div>
							<button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
						</div>
					`,
					cols: [[
						{
							title: '用户id',
							field: 'userId'
						},
						{
							title: '用户名',
							field: 'userName'
						},
						{
							title: '邮箱',
							field: 'email'
						},
						{
							title: '角色',
							templet: function(d){
								let roleList = d.roleList;
								let roles = [];
								if(roleList && roleList.length>0){
									for (let i = 0; i < roleList.length; i++) {
										roles[i] = roleList[i].roleName;
									}
								}
								return roles;
							}
						},
						{
							title: '状态',
							// templet: function(d){
							// 	return d.status==1?'<span class="layui-badge layui-bg-green">可用</span>':'<span class="layui-badge">不可用</span>';
							// }
							templet: function(d){
								return '<input type="checkbox" name="status" value="'+d.userId+'" lay-skin="switch" lay-filter="switchStatus" title="正常|禁用"'+(d.status==1?'checked':'')+'>';
							}
						},
						{
							title: '操作',
							templet: function(){
								//let s = '<button type="button" class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete">删除</button>';
								let s ='<button type="button" class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>';
								return s;
							}
						}
					]]

				});

			});
		</script>
	</body>
</html>
